<template>
  <div class="create_sub_users_dialog">
    <el-dialog
      v-model="dialogVisible"
      title="创建子用户"
      width="500"
      :before-close="handleClose"
    >
      <div class="form_box">
        <el-form
          :model="formData"
          :rules="rules"
          ref="formRef"
          label-width="auto"
          style="width: 400px"
        >
          <el-form-item label="用户名：" prop="username">
            <el-input
              v-model="formData.username"
              placeholder="请输入用户名"
            />
          </el-form-item>

          <el-form-item label="用户昵称(选填)：">
            <el-input
              v-model="formData.nickname"
              placeholder="请输入用户用户昵称"
            />
          </el-form-item>

          <el-form-item label="手机号：" prop="phoneNumber">
            <el-input
              v-model="formData.phoneNumber"
              placeholder="请输入手机号"
            />
          </el-form-item>

          <el-form-item label="邮箱地址：" prop="email">
            <el-input
              v-model="formData.email"
              placeholder="请输入邮箱地址"
            />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleCreate">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, defineExpose } from 'vue'
import { createSubUser } from '@/api/subUserManagement.js'
import { ElMessage } from 'element-plus'
// import { updateUserInfo } from '@/api/user.js'

const emits = defineEmits(['updateUserList'])

// 控制弹窗显示隐藏
const dialogVisible = ref(false)

// 打开弹窗
const handleOpen = () => {
  dialogVisible.value = true
}

// 关闭弹窗
const handleClose = () => {
  // 关闭弹窗时清空表单内容
  formData.value = {
    username: '',
    phoneNumber: '',
    email: '',
  }
  dialogVisible.value = false
}

// 表单数据
const formData = ref({
  username: '',
  phoneNumber: '',
  email: '',
  nickname: '',
})

// 表单校验规则
const rules = ref({
  username: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur',
    },
    {
      min: 3,
      max: 12,
      message: '用户名长度在 3 到 12 个字符',
      trigger: 'blur',
    },
  ],
  phoneNumber: [
    {
      required: true,
      message: '请输入手机号',
      trigger: 'blur',
    },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入正确的手机号格式',
      trigger: 'blur',
    },
  ],
  email: [
    {
      required: true,
      message: '请输入邮箱地址',
      trigger: 'blur',
    },
    {
      type: 'email',
      message: '请输入正确的邮箱格式',
      trigger: 'blur',
    },
  ],
})

// 表单实例
const formRef = ref(null)
// 确定创建子用户
const handleCreate = async () => {
  try {
    // 校验表单
    await formRef.value.validate()
    // 有id 编辑
    if (formData.value.userId) {
      let data = {
        userId: formData.value.userId,
        username: formData.value.username,
        phoneNumber: formData.value.phoneNumber,
        email: formData.value.email,
      }
      // await updateUserInfo(data)
      ElMessage.success('信息修改成功')
    } else {
      // 调用创建子用户接口
      await createSubUser(formData.value)
      ElMessage.success('创建子用户成功')
    }

    // 通知父组件更新用户列表
    emits('updateUserList')
    handleClose()
  } catch (err) {
    console.log(err)
    // 用户名已存在
    if (err.status === 409) {
      ElMessage.error('用户名已存在，请重新输入')
    }
  }
}

// 暴露父组件需要用到的组件方法
defineExpose({
  handleOpen,
  handleClose,
  formData,
})
</script>

<style scoped>
.create_sub_users_dialog {
  .form_box {
    display: flex;
    justify-content: center;
  }
}
</style>
